<template>
	<view class="qiun-charts"><canvas disable-scroll=true canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas></view>
</template>

<script>
import uCharts from '@/common/js_sdk/u-charts/u-charts.min.js';
var _self;
var canvaColumn = null;

export default {
	props:{
		itemData:{
			type:Object,
			default:() => ({})
		},
	},
	watch:{
		itemData:{
			handler(val){
				_self = this;
				this.cWidth = uni.upx2px(750 - 60);
				this.cHeight = uni.upx2px(500);
				this.showColumn('canvasColumn', val);
			},
			immediate: true,
			deep:true
		}
	},
	data() {
		return {
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			serverData: ''
		};
	},
	created() {
		_self = this;
		this.cWidth = uni.upx2px(750 - 60);
		this.cHeight = uni.upx2px(500);
	},
	// mounted() {
	// 	var Column = {
	// 		categories: ['A', 'B', 'C', 'D', 'E', 'F','G','H'],
	// 		series: [
	// 			{
	// 				name: '选项率',
	// 				data: [0,20,40,60,80,90,50,15]
	// 			}
	// 		]
	// 	};
	// 	this.showColumn('canvasColumn', Column);
	// },
	methods: {
		showColumn(canvasId, chartData) {
			canvaColumn = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				padding:[15,5,0,15],
				legend: { show: true },
				fontSize: 11,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				animation: true,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				enableScroll: true,//开启图表拖拽功能
				xAxis: {
					disableGrid: true,
					type:'grid',
					gridType:'dash',
					itemCount:4,
					scrollShow:true,
					scrollAlign:'left',
				},
				yAxis: {
					//disabled:true
					min:0,
					max:100,
				},
				dataLabel: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					column: {
						type: 'group',
						width: (_self.cWidth * _self.pixelRatio * 0.45) / chartData.categories.length
					}
				}
			});
		},
		touchColumn(e){
			canvaColumn.scrollStart(e);
		},
		moveColumn(e) {
			canvaColumn.scroll(e);
		},
		touchEndColumn(e) {
			canvaColumn.scrollEnd(e);
			canvaColumn.touchLegend(e, {
				animation:true,
			});
			// canvaColumn.showToolTip(e, {
			// 	format: function (item, category) {
			// 		return category + ' ' + item.name + ':' + item.data + '%'
			// 	}
			// });
		},
	}
};
</script>

<style scoped lang="scss">
.qiun-charts {
	width: 100%;
	height: 500upx;
	background-color: #ffffff;
}
.charts {
	width: 100%;
	height: 500upx;
	background-color: #ffffff;
}
</style>
